<template>
  <div :id="id" :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts'
  import resize from './mixins/resize'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      id: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '200px'
      },
      chartData: {}
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.initChart()
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(document.getElementById(this.id))

        let legendData = this.buildLegendData(this.chartData);
        let series = this.buildSeries(this.chartData);

        this.chart.setOption({
          backgroundColor: '#394056',
          title: {
            top: 20,
            text: this.chartData.title,
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#F1F1F3'
            },
            left: '1%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          legend: {
            top: 20,
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            data: legendData,
            right: '4%',
            textStyle: {
              fontSize: 12,
              color: '#F1F1F3'
            }
          },
          grid: {
            top: 100,
            left: '2%',
            right: '2%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: this.chartData.xAxis
          }],
          yAxis: [{
            type: 'value',
            name: '(%)',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: '#57617B'
              }
            }
          }],
          series: series
        })
      },
      //构件图例数据
      buildLegendData(chartData) {
        let legendData = [];
        for (let i = 0; i < chartData.items.length; i++) {
          legendData.push(chartData.items[i].name)
        }
        return legendData;
      },
      //构建图形
      buildSeries(chartData) {
        let series = [];

        for (let i = 0; i < chartData.items.length; i++) {
          let colors = buildColors();

          series.push({
            name: chartData.items[i].name,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: colors[0]
                }, {
                  offset: 0.8,
                  color: colors[1]
                }], false),
                shadowColor: colors[2],
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: colors[3],
                borderColor: colors[4],
                borderWidth: 12
              }
            },
            data: chartData.items[i].dataList
          });
        }
        return series;
      }
    }
  }

  //生成随机颜色
  function buildColor(type) {
    let r = Math.floor(Math.random() * 256);
    let g = Math.floor(Math.random() * 256);
    let b = Math.floor(Math.random() * 256);
    let a = Math.floor(Math.random() * 10) / 10.0;

    let color = '';
    if (type == 'rgba') {
      color = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
    } else {
      color = 'rgb(' + r + ',' + g + ',' + b + ')';
    }
    return color;
  }

  //生成随机颜色组 图标每一组数据使用的颜色值是相近的
  function buildColors() {
    let r = Math.floor(Math.random() * 256);
    let g = Math.floor(Math.random() * 256);
    let b = Math.floor(Math.random() * 256);
    let a = Math.floor(Math.random() * 4 + 2) / 10.0;

    let colors = [];
    colors.push('rgba(' + r + ',' + g + ',' + b + ',' + a + ')');
    colors.push('rgba(' + r + ',' + g + ',' + b + ',' + 0 + ')');
    colors.push('rgba(' + 0 + ',' + 0 + ',' + 0 + ',' + 0.1 + ')');
    colors.push('rgb(' + r + ',' + g + ',' + b + ')');
    colors.push('rgba(' + r + ',' + g + ',' + b + ',' + 0.2 + ')');

    return colors;
  }
</script>
